// import MessageBox from "./Message.vue"
import Vue from "vue"

// 如果要高内聚性，可以在js中用 jsx 编写vue组件（需要安装 @vitejs/plugin-vue-jsx 或 babel-plugin-transform-vue-jsx）
// js中写css：一：css modules    二：css in js （安装库 styils vue）
// 不过这样子高内聚需要知识储备性要高，维护性可能比vue单文件组件要差点。
const MessageBox = {
   props:{
      msg:{
         type: String,
        
      }
   },
   render(ctx){
      const {$props, $emit} = ctx
      return <div> { $props.msg }!!!
      <button click={$emit('onClick')}>确定</button>
     </div>
   }
}

// 其实这个时候 showMsg 也是一个组件，此时它的里面包含了一个 div 弹框， 
// 弹框的样式由 MessageBox 提供。
function showMsg(msg, clickEvent){
   const div = document.createElement("div")
   document.body.appendChild(div)
// 创建一个 MessageBox 组件实例，并且挂载到 div 上。
   new Vue({
      render: h => h(MessageBox, {msg})
   }, ).$mount(div)

}
export default showMsg